<!--
* @author wn
* @date 2022/07/20 14:39:06
* @description: 二级路由 注册 登陆 页面
!-->
<template>
	<!-- 登陆主体 -->
	<section class="login-section">
		<div class="wrapper">
			<!-- 动画容器 -->
			<section
				ref="login"
				@mouseenter="isOutside = false"
				@mouseleave="isOutside = true"
			>
				<nav>
					<a
						href="javascript:;"
						:class="{ active: activeComponent === 'LoginForm' }"
						@click="activeComponent = 'LoginForm'"
					>
						账户登录
					</a>
					<a
						href="javascript:;"
						:class="{ active: activeComponent === 'QRcode' }"
						@click="activeComponent = 'QRcode'"
					>
						扫码登录
					</a>
				</nav>
				<!-- 表单 or 二维码 -->
				<component :is="activeComponent"></component>
				<transition name="login">
					<span v-if="!isOutside" :style="layerPosition"></span>
				</transition>
			</section>
		</div>
	</section>
</template>
<script>
import LoginForm from './components/LoginForm'
import QRcode from './components/QRcode'
import { ref, watch, reactive } from 'vue'
import { useMouseInElement } from '@vueuse/core'

export default {
	name: 'index',
	components: { LoginForm, QRcode },
	setup() {
		const activeComponent = ref('LoginForm')
		// 网上找的  登录页面 进出 动画
		// 获取 login
		const login = ref(null)
		// 定义响应式数据，更新数据的时候更新视图
		const layerPosition = reactive({ left: 0, top: 0 })
		//  isOutside  true 外面
		const { elementX, elementY } = useMouseInElement(login)
		watch([elementX, elementY], array => {
			// 样式需要加 px 单位
			layerPosition.left = `${array[0]}px`
			layerPosition.top = `${array[1]}px`
		})
		// isOutside 每次刷新 页面 相当于 组件销毁 动画 out执行
		const isOutside = ref(true)
		return {
			activeComponent,
			login,
			isOutside,
			layerPosition,
		}
	},
}
</script>
<style scoped lang="less">
// 网上找的  进出 动画
// 鼠标进入动画
.login {
	&-enter-active {
		animation: in 0.5s ease-out forwards;
	}
	&-leave-active {
		animation: out 0.5s ease-out forwards;
	}
}
@keyframes in {
	0% {
		width: 0;
		height: 0;
	}
	100% {
		width: 1200px;
		height: 1200px;
	}
}
// 鼠标离开动画
@keyframes out {
	0% {
		width: 1200px;
		height: 1200px;
	}
	100% {
		width: 0;
		height: 0;
	}
}
// ================
.login-section {
	position: relative;
	height: 488px;
	background: url(~@/assets/images/login-bg.png) no-repeat center / cover;
	.wrapper {
		> section {
			position: relative;
			overflow: hidden;
			width: 380px;
			min-height: 400px;
			span {
				position: absolute;
				top: 0;
				left: 0;
				width: 1200px;
				height: 1200px;
				background-color: rgba(156, 88, 88, 0.2);
				// 鼠标居中
				transform: translate(-50%, -50%);
				// 圆的形式展开
				border-radius: 50%;
				// 事件可以继续能够点击到，不被遮罩层影响
				pointer-events: none;
			}
		}
		// 分割线 ==================
		position: absolute;
		top: 54px;
		left: 50%;
		transform: translateX(100px);
		width: 380px;
		min-height: 400px;
		background: #fff;
		box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
		nav {
			display: flex;
			align-items: center;
			height: 55px;
			padding: 0 40px;
			border-bottom: 1px solid #f5f5f5;
			a {
				flex: 1;
				font-size: 18px;
				line-height: 1;
				text-align: left;
				~ a {
					text-align: right;
					border-left: 1px solid #f5f5f5;
				}
				&.active {
					font-weight: 700;
					color: @xtxColor;
				}
			}
		}
	}
}
</style>
